<template>
  <div class="body">
    <div class="body-box">
      <Breadcrumb />
      <div style="margin-top: 20px">
        <vxe-table
          border
          show-overflow
          show-header-overflow
          show-footer-overflow
          height="600"
          :column-config="{ resizable: true }"
          :virtual-y-config="{ enabled: true, gt: 0 }"
          :data="tableData"
          :checkbox-config="checkboxConfig"
        >
          <vxe-column type="checkbox" title="Name"></vxe-column>
          <vxe-column type="seq" width="70"></vxe-column>
          <vxe-column field="role" title="Role"></vxe-column>
          <vxe-column field="sex" title="Sex"></vxe-column>
        </vxe-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';

import Breadcrumb from '@/components/Breadcrumb';

@Component({
  components: {
    Breadcrumb,
  },
})
export default class RangeDemo extends Vue {
  tableData = [];
  checkboxConfig = {
    labelField: 'name',
    highlight: true,
    range: true,
  };

  // 初始化
  mounted() {
    this.init();
  }

  async init() {
    this.loadList(500);
  }

  // 模拟行数据
  loadList(size = 200) {
    const dataList: any = [];
    for (let i = 0; i < size; i++) {
      dataList.push({
        id: 10000 + i,
        name: 'Test' + i,
        role: 'Developer',
        sex: '男',
      });
    }
    this.tableData = dataList;
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
